<template>
  <el-card class="box-card" v-loading="loading">
    <div class="clearfix">
      <span>员工信息</span>
    </div>
    <div class="container">
      <div class="demo-basic--circle">
        <el-upload
          class="avatar-uploader"
          action="/user/uploadProfilePhoto"
          :show-file-list="false"
          accept=".jpg"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-avatar :size="100" :src="circleUrl"></el-avatar
        ></el-upload>
      </div>
      <el-descriptions style="background-color: rgba(220, 220, 220, 0.647)">
        <el-descriptions-item label="用户名">
          {{ user.loginUserName }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          user.phoneNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{
          user.province
        }}</el-descriptions-item>
        <el-descriptions-item label="所属部门">{{
          user.dept
        }}</el-descriptions-item>
        <el-descriptions-item label="联系地址"
          >{{ user.address }}
        </el-descriptions-item>
      </el-descriptions>
      <hr style="width: 80%; margin: 0 auto; margin-top: 30px" />
      <el-empty description="暂无待处理事项"></el-empty>
    </div>
  </el-card>
</template>

<script>
import pubsub from "pubsub-js";

export default {
  name: "info",
  data() {
    return {
      // 加载状态
      loading: false,
      //  头像Base64
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      // 当前登录员工
      user: {
        loginUserName: "",
        phoneNumber: "",
        address: "",
        province: "",
        dept: "",
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    pubsub.publish("Reload", "reload");
    next();
  },
  mounted() {
    sessionStorage.setItem("activePath", "info");
    this.getLoginUserInfo();
    this.getLoginImage();
  },
  methods: {
    // 获取当前员工信息
    async getLoginUserInfo() {
      this.loading = true;
      const { data: res } = await this.$http.post("/user/getInfo", {
        id: sessionStorage.getItem("token"),
      });
      if (res.status != 200) {
        this.loading = false;
        return this.$message.error(res.msg);
      }
      this.user.loginUserName = res.data.user.empName;
      this.user.phoneNumber = res.data.empInfo.phoneNumber;
      this.user.address = res.data.empInfo.contactAddress;
      this.user.province = res.data.empInfo.home;
      this.user.dept = res.data.dept.deptName;
      this.loading = false;
    },
    // 获取图片
    async getLoginImage() {
      const { data: res } = await this.$http.post("/user/getProfilePhoto", {
        id: sessionStorage.getItem("token"),
      });

      // var imgCode =
      //   "data:image/png;base64," +
      //   window.btoa(
      //     new Uint8Array(res).reduce(
      //       (data, byte) => data + String.fromCharCode(byte),
      //       ""
      //     )
      //   );

      this.circleUrl = "data:image/png;base64,"+res;
      console.log(this.circleUrl);
    },
    handleAvatarSuccess(res, file) {
      this.$message.success("头像更新成功");
      this.getLoginImage();
    },
    // 文件上传前的验证，本项目不需要
    beforeAvatarUpload(file) {},
  },
};
</script>

<style scoped>
.el-empty {
  height: 230px;
}
.avatar-uploader {
  text-align: center;
  width: 100px;
  margin: 0 auto;
}
.demo-basic--circle {
  width: 100%;
}
.el-descriptions {
  width: 75%;
  margin: 0 auto;
  margin-top: 30px;
}
.box-card {
  height: 100%;
  background-color: rgba(220, 220, 220, 0.647);
  border-radius: 18px;
}

.clearfix {
  margin: 20px 0;
  padding: 0 50px;
  font-size: 20px;
  font-weight: 900;
}

.container {
  width: 100%;
  margin-top: 40px;
}
</style>
